<template>
    <div class="carousel-manage">
        <div class="header">
            <el-button type="primary" @click="handleAdd">添加轮播图</el-button>
        </div>

        <!-- 轮播图列表 -->
        <el-table :data="carouselList" style="width: 100%" v-loading="loading">
            <el-table-column prop="title" label="标题" />
            <el-table-column label="图片" width="180">
                <template #default="scope">
                    <el-image style="width: 100px; height: 60px" :src="scope.row.imageUrl" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column prop="link" label="链接" />
            <el-table-column prop="sort" label="排序" width="80" />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.status ? 'success' : 'info'">
                        {{ scope.row.status ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加/编辑对话框 -->
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="图片" prop="imageUrl">
                    <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleUploadSuccess"
                        :before-upload="beforeUpload">
                        <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="链接" prop="link">
                    <el-input v-model="form.link" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.sort" :min="0" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="form.status" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 数据列表
const carouselList = ref([])
const loading = ref(false)

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)

// 表单数据
const form = reactive({
    title: '',
    imageUrl: '',
    link: '',
    sort: 0,
    status: true
})

// 表单验证规则
const rules = {
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    imageUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
    link: [{ required: true, message: '请输入链接', trigger: 'blur' }]
}

// 获取轮播图列表
const getCarouselList = async () => {
    loading.value = true
    try {
        // 这里替换为实际的API调用
        // const { data } = await getCarouselAPI()
        // carouselList.value = data
        carouselList.value = [] // 临时数据
    } catch (error) {
        console.error(error)
        ElMessage.error('获取轮播图列表失败')
    }
    loading.value = false
}

// 添加轮播图
const handleAdd = () => {
    dialogTitle.value = '添加轮播图'
    dialogVisible.value = true
    // 重置表单
    Object.assign(form, {
        title: '',
        imageUrl: '',
        link: '',
        sort: 0,
        status: true
    })
}

// 编辑轮播图
const handleEdit = (row) => {
    dialogTitle.value = '编辑轮播图'
    dialogVisible.value = true
    // 填充表单数据
    Object.assign(form, row)
}

// 删除轮播图
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除该轮播图吗？', '提示', {
        type: 'warning'
    }).then(async () => {
        try {
            // 这里替换为实际的API调用
            // await deleteCarouselAPI(row.id)
            ElMessage.success('删除成功')
            getCarouselList()
        } catch (error) {
            console.error(error)
            ElMessage.error('删除失败')
        }
    })
}

// 上传图片相关
const handleUploadSuccess = (res) => {
    form.imageUrl = res.url
}

const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/')
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isImage) {
        ElMessage.error('只能上传图片文件!')
        return false
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    return true
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // 这里替换为实际的API调用
                // if (form.id) {
                //   await updateCarouselAPI(form)
                // } else {
                //   await addCarouselAPI(form)
                // }
                ElMessage.success(form.id ? '更新成功' : '添加成功')
                dialogVisible.value = false
                getCarouselList()
            } catch (error) {
                console.error(error)
                ElMessage.error(form.id ? '更新失败' : '添加失败')
            }
        }
    })
}

// 初始化
getCarouselList()
</script>

<style scoped>
.carousel-manage {
    padding: 20px;
}

.header {
    margin-bottom: 20px;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.avatar-uploader:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    line-height: 178px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>